<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="../../resources/css/articledetails.css" />
		<link rel="stylesheet" href="../../resources/layui/css/layui.css" />
		<script type="text/javascript" src="../../resources/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="../../resources/js/getUrlString.js"></script>
		<script type="text/javascript" src="../../resources/js/postbird-img-glass.min.js" ></script>
	</head>

	<body>
		<jsp:include page="/pages/common/header.jsp"></jsp:include>
		<div class="main">
			<div class="content">
				<!--文章内容-->
				<div class="l_content">
					<!--文章内容-->

					<div class="article_content">
						<div class="article_header">
							<!--标题-->
							<div class="title">
							</div>
							
							<div class="h_other">
								<!--作者-->
								<span class="layui-icon-username layui-icon">
									
								</span>
								<span class="mr30" id="mr1"></span>
								<!--浏览量-->
								<span class="layui-icon-log layui-icon">
									
								</span>
								<span class="mr30" id="mr2"></span>
								<!--评论人数-->
								<span class="layui-icon-dialogue layui-icon">
									
								</span>
								<span class="mr30" id="mr3"></span>
							</div>
						</div>
						<!--文章内容-->
						<div class="r_content">
						</div>
						<!--评论表单-->
						<form method="post" class="layui-form">
							<textarea id="comment_area" name="comment.commentContent" class="layui-textarea"></textarea>

							<input type="hidden" id="hiddenvalue" name="article.articleId" value="" />
							<div class="over_box">

								<button class="layui-btn layui-btn-normal comm" lay-submit="" lay-filter="play">评论</button>
							</div>
						</form>
					</div>

					<!--评论-->
					<div class="comment">

						<ul class="comment_box" id="pn">							

							
						</ul>
						
					</div>
					
					<div style="clear: both;"></div>
					<div id="page"></div>
				</div>
				<!--右侧box-->
				<div class="r_other">
					<div class="user">
						<div class="usericon">
							
						</div>
						<div class="userdetails">
							<div class="r_username">
							</div>
							<p class="textdetails">
							</p>
						</div>
						<div class="fans">
							<div class="userfans">
								<p class="col">粉丝</p>
								<p class="nb"></p>
							</div>
							<span class="layui-btn layui-btn-normal" id="gz">
								关注
							</span>
							<div class="guanzhu">
								<p class="col">关注</p>
								<p class="nb2"></p>
							</div>
							<div style="clear: both;"></div>

						</div>
					</div>
				</div>
			</div>
			<div style="clear: both;"></div>

		</div>

		<jsp:include page="/pages/common/footer.jsp"></jsp:include>
		<script>
			var articelUserId ="";
			var interal = "";
			$(document).ready(function() {
					
					var userid = '${ sessionScope.userId}';
					$.ajax({
					type: "post",
					url: "/article/queryQuestionDeatils.action",
					data: {
						"article.articleId": GetUrlString("questionid")
					},
					dataType: "json",
					success: function(articleDetails) {
						if(articleDetails.userPhoto==null){
							articleDetails.userPhoto="../../resources/images/s3.png"
							$(".usericon").append("<img src="+articleDetails.userPhoto+" />");
						}else{
							$(".usericon").append("<img src="+articleDetails.userPhoto+" />");
						}
						articelUserId = articleDetails.article.userId;
						interal =articleDetails.article.interal;
						$(".title").html(articleDetails.article.articleTitle);
						$(".artcle_type").html(articleDetails.article.articleTypeId);
						$(".r_content").html(articleDetails.article.articleContent);
						$("#mr1").html(articleDetails.userName);
						$("#mr2").html(articleDetails.article.readNumber);
						$("#mr3").html(articleDetails.article.commentNumber);
						$(".r_username").html(articleDetails.userName);
						$(".textdetails").html(articleDetails.userAutograph);
						$(".nb").html(articleDetails.userCercened);
						$(".nb2").html(articleDetails.userCercen);
						var useConcernId = articleDetails.article.userId;
						//图片灯箱插件
						PostbirdImgGlass.init({
							domSelector: ".r_content img",
							animation: true,
						});
						//如果拿不到id
						if(userid != '') {
							$.ajax({
								type: "post",
								url: "/userConcern/isConcern.action",
								data: {
									"userConcern.userId": userid,
									"userConcern.useConcernId": useConcernId
								},
								dataType: "json",
								success: function(data) {
									if(data.result == false) {
										$("#gz").html("关注");
										$("#gz").click(function() {

											if(userid != useConcernId) {
												$.ajax({
													type: "post",
													url: "/userConcern/addUserConCern.action",
													data: {
														"userConcern.userId": userid,
														"userConcern.useConcernId": useConcernId
													},
													dataType: "json",
													success: function(data) {
														if(data.result == true) {
															layer.msg("关注成功！", {
																icon: 1,
															});
															window.location.reload();
														}
													}
												});
											} else {
												layer.msg("不能自己关注自己！", {
													icon: 2,
												});
											}

										});
									} else {
										$("#gz").html("取消关注");
										$("#gz").css("right", "64px")
										$("#gz").click(function() {
											$.ajax({
												type: "post",
												url: "/userConcern/deletUserConCern.action",
												data: {
													"userConcern.userId": userid,
													"userConcern.useConcernId": useConcernId
												},
												dataType: "json",
												success: function(data) {
													if(data.result == true) {
														layer.msg("取消关注成功！", {
															icon: 1,
														});
														window.location.reload();
													} else {
														layer.msg("出错了！", {
															icon: 2,
														});
													}
												}
											});
										});
									}
								}
							});
						} else {
							$(document).on('click', '#gz', function() {
								layui.use('layer', function() {
									var layer = layui.layer;
									layer.msg('您还未登陆！', {
										icon: 2,
										time: 1000,
										end: function() {
											var index = layer.open({
												type: 2,
												title: '注册/登陆',
												shadeClose: true,
												area: ['420px', '380px'],
												content: '	/pages/relogin/login.jsp'
											});
										}
									});

								});
							});
						}
						
					},error: function() {
						layer.msg("错误", {
							icon: 2,
						});
					}
				});
				
				
				
				$.ajax({
					type: "post",
					url: "/comment/queryArticleComment.action",
					data: {
						"article.articleId": GetUrlString("questionid")
					},
					dataType: "json",
					success: function(result) {
						console.log(result.usersRow);
						console.log(result.row);
						var currpage = result.totalPage;
						var pagecount = result.pageSize;
						layui.use("laypage", function() {
							var laypage = layui.laypage;
							laypage.render({
								elem: 'page',
								count: currpage * pagecount, //总页数
								limit: 7,
								jump: function(obj, first) {
									console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
									console.log(obj.limit); //得到每页显示的条数
									var pageIndex = obj.curr;
									var pageLimit = obj.limit;
									//首次不执行
									if(!first) {
										$(".comment_box").html("");
										toPage(pageIndex, pageLimit);
									}
								}
							});
						});
						for(var i = 0; i < result.usersRow.length; i++) {
							for(var j = i + 1; j < result.usersRow.length;) {
								if(result.usersRow[i].userId == result.usersRow[j].userId) {
									result.usersRow.splice(j, 1); //去除重复的对象；
								} else {
									j++;
								}
							}
						}
						var i = 0;
						$.each(result.usersRow, function(usersRowindex, usersRowitem) {
							$.each(result.row, function(rowindex, rowitem) {
								
								if(usersRowitem.userId == rowitem.userId) {
									if(usersRowitem.userPhoto == null) {
										usersRowitem.userPhoto = "../../resources/images/foot-logo.png";
									}
									var accept_state = rowitem.acceptState;
									var commentUserId = rowitem.userId;
									var state = "";
									var li ="";
									if(accept_state == 0){
										li += "<li class='com_box'><div class='l_img'><img src='" + usersRowitem.userPhoto + "'/></div>";
										li += "<div class='r_box'><div class='agree' ><span style='display:none'>"+commentUserId+"</span><span class='cnimg'><img src='../../resources/images/sign-check-icon.png'></span><p style='color:red'>已采纳<input type='hidden' value='" + rowitem.commentId + "'></p></div><div class='username'><a href=''>" + usersRowitem.userName + "</a>";
										
									}else{
										li += "<li class='com_box'><div class='l_img'><img src='" + usersRowitem.userPhoto + "'/></div>";
										li += "<div class='r_box'><div class='agree' ><span style='display:none'>"+commentUserId+"</span><p>未采纳<input type='hidden' value='" + rowitem.commentId + "'></p></div><div class='username'><a href=''>" + usersRowitem.userName + "</a>";
									}
										li += "<span class='replay_time mr30'>" + rowitem.commentTime + "</span></div>";
										li += "<p class='text'>" + rowitem.commentContent + "</p>";
										li += "<div class='other'><span class='repla'><span class='replay layui-icon layui-icon-dialogue'></span></span>";
										li += "<span class='dianzan layui-icon layui-icon-praise'></span>";
										li += "<span class='mr30'>" + rowitem.goodNumber + "</span>";
										li += "<span class='cai layui-icon layui-icon-tread'></span><span class='mr30'>" + rowitem.badNumber + "</span></div></div></li>";
										$(".comment_box").append(li);
										i++;	
								}
							});
						});
						$('.repla').on('click', function() {
							layer.open({
								type: 2,
								title: '回复',
								shadeClose: true, //点击遮罩关闭层
								area: ['800px', '250px'],
								content: '../common/comment.jsp'
							});
						});
						
						$(".comment_box li").each(function(index) {
							$(this).find(".agree").click(function() {
								var comment_id = $(this).find("input").val();
								var commentUserId = $(this).find("span").html();
//								alert(comment_id+"//"+commentUserId);
								$.ajax({
									type:"post",
									url:"/article/isCanAgree.action",
									data:{
										"article.articleId": GetUrlString("questionid")
									},
									dataType:"json",
									success:function(data){
										//问题未解决
										if(data.result == true){
											$.ajax({
												type:"post",
												url:"/comment/updateCommentState.action",
												data:{
													"comment.commentId":comment_id,
													"comment.userId":commentUserId,
													"article.userId":articelUserId
												},
												dataType:"json",
												success:function(data){
													if(data.result == true){
														layer.msg("采纳成功！扣除"+interal+"积分", {
																		icon: 1,
																		time:2000,
														});
														$.ajax({
															type:"post",
															url:"/comment/addInteral.action",
															data:{
																"comment.userId":commentUserId,
																"article.interal":interal
															},
															dataType:"json",
															success:function(data){
																	
															}																			
															});
														$.ajax({
															type:"post",
															url:"/article/updateQuestionState.action",
															data:{
																"article.articleId":GetUrlString("questionid")
															},
															dataType:"json",
															success:function(data){
																if(data.result == true){
																	document.location.reload();
																	
																}else{
																	layer.msg("出错了！", {
																		icon: 1,
																		time:2000,
																	});
																}
															}
														});
													}else if(data.result == false){
														layer.msg("出错了！", {
																icon: 2,
														});
														document.location.reload();
													}else {
														layer.msg(""+data.result, {
																icon: 2,
														});
													}
												}
											});
										}else{
											layer.msg("已有评论被采纳！", {
												icon: 2,
											});
										}
									}
								});
							});
						
						});
					}
				});
			})
			
		</script>
		
		<script>
			layui.use("layedit", function() {
				var layedit = layui.layedit;
				var ind = layedit.build('comment_area', {
					tool: ['left', 'center', 'right', '|', 'face'],
					height: 100
				});
				layui.use('form', function() {
					var form = layui.form;
					form.on('submit(play)', function() {
						var text = layedit.getText(ind);
						var articleId = GetUrlString("questionid")
						
						var userid = '${ sessionScope.userId}'; 
						<c:choose>
							<c:when test = "${empty sessionScope.userId}" >
							layer.msg('您还未登陆！', {
								icon: 2,
								time: 2000,
								end: function() {
									var index = layer.open({
										type: 2,
										title: '注册/登陆',
										shadeClose: true,
										area: ['420px', '380px'],
										content: '/pages/relogin/login.jsp'
									});
								}
							}); 
								return false;
							</c:when> 
						</c:choose>
						if(text == undefined || text == "" || /^\s+$/g.test(text)) {
							layer.msg("评论内容不能为空", {
								icon: 2
							});
							return false;
						}
						$.ajax({

							type: "post",
							url: "/comment/addArticleComment.action",
							data: {
								"comment.commentContent": text,
								"article.articleId": articleId
							},
							dataType: 'json',
							success: function(data) {
								if(data == true) {
									layer.msg('评论成功！', {
										icon: 1,
										shade: 0.01
									});
									document.location.reload();
								} else {
									layer.msg('评论失败！', {
										icon: 1,
										shade: 0.01
									});
								}

							},
							error: function() {
								layer.msg("错误");
							}

						});

						return false;
					});

				});
			});
		</script>
		<!--点击查看更多，获得replayId,ajax加载回复评论-->
		<script>
			function toPage(pageCount, pageSize) {
				var loading = layer.msg('加载中！请稍后....', {
					icon: 16,
					shade: 0.01
				});
				$.ajax({
					type: "get",
					url: "/comment/queryArticleComment.action",
					data: {
						"pageCount": pageCount,
						"pageSize": pageSize,
						"article.articleId": GetUrlString("questionid")
					},
					dataType: "json",
					success: function(result) {
						for(var i = 0; i < result.usersRow.length; i++) {
							for(var j = i + 1; j < result.usersRow.length;) {
								if(result.usersRow[i].userId == result.usersRow[j].userId) {
									result.usersRow.splice(j, 1); //去除重复的对象；
								} else {
									j++;
								}
							}
						}
						var i = 0;
						$.each(result.usersRow, function(usersRowindex, usersRowitem) {
							$.each(result.row, function(rowindex, rowitem) {
								if(usersRowitem.userId == rowitem.userId) {
									if(usersRowitem.userPhoto == null) {
										usersRowitem.userPhoto = "../../resources/images/foot-logo.png";
									}
									var accept_state = rowitem.acceptState;
									var commentUserId = rowitem.userId;
									var state = "";
									var li ="";
									if(accept_state == 0){
										li += "<li class='com_box'><div class='l_img'><img src='" + usersRowitem.userPhoto + "'/></div>";
										li += "<div class='r_box'><div class='agree' ><span style='display:none'>"+commentUserId+"</span><span class='cnimg'><img src='../../resources/images/sign-check-icon.png'></span><p style='color:red'>已采纳<input type='hidden' value='" + rowitem.commentId + "'></p></div><div class='username'><a href=''>" + usersRowitem.userName + "</a>";
										
									}else{
										li += "<li class='com_box'><div class='l_img'><img src='" + usersRowitem.userPhoto + "'/></div>";
										li += "<div class='r_box'><div class='agree' ><span style='display:none'>"+commentUserId+"</span><p>未采纳<input type='hidden' value='" + rowitem.commentId + "'></p></div><div class='username'><a href=''>" + usersRowitem.userName + "</a>";
									}
										li += "<span class='replay_time mr30'>" + rowitem.commentTime + "</span></div>";
										li += "<p class='text'>" + rowitem.commentContent + "</p>";
										li += "<div class='other'><span class='repla'><span class='replay layui-icon layui-icon-dialogue'></span></span>";
										li += "<span class='dianzan layui-icon layui-icon-praise'></span>";
										li += "<span class='mr30'>" + rowitem.goodNumber + "</span>";
										li += "<span class='cai layui-icon layui-icon-tread'></span><span class='mr30'>" + rowitem.badNumber + "</span></div></div></li>";
										$(".comment_box").append(li);
										i++;	
								}
							});
						});
						layer.msg('加载成功！！', {
							icon: 1,
							time: 1000,
						});
						$('.repla').on('click', function() {
							layer.open({
								type: 2,
								title: '回复',
								shadeClose: true, //点击遮罩关闭层
								area: ['800px', '100px'],
								content: '../common/comment.jsp'
							});
						});
						$(".comment_box li").each(function(index) {
							$(this).find(".agree").click(function() {
								var comment_id = $(this).find("input").val();
								var commentUserId = $(this).find("span").html();
//								alert(comment_id+"//"+commentUserId);
								$.ajax({
									type:"post",
									url:"/article/isCanAgree.action",
									data:{
										"article.articleId": GetUrlString("questionid")
									},
									dataType:"json",
									success:function(data){
										//问题未解决
										if(data.result == true){
											$.ajax({
												type:"post",
												url:"/comment/updateCommentState.action",
												data:{
													"comment.commentId":comment_id,
													"comment.userId":commentUserId,
													"article.userId":articelUserId
												},
												dataType:"json",
												success:function(data){
													if(data.result == true){
														layer.msg("采纳成功！", {
																icon: 1,
														});
														$.ajax({
															type:"post",
															url:"/article/updateQuestionState.action",
															data:{
																"article.articleId":GetUrlString("questionid")
															},
															dataType:"json",
															success:function(data){
																if(data.result == true){
																	document.location.reload();
																}else{
																	
																}
															}
														});
													}else if(data.result == false){
														layer.msg("出错了！", {
																icon: 2,
														});
														document.location.reload();
													}else {
														layer.msg(""+data.result, {
																icon: 2,
														});
													}
												}
											});
										}else{
											layer.msg("已有评论被采纳！", {
												icon: 2,
											});
										}
									}
								});
							});
						
						});
					}
				});
			}
		</script>
		<script>

			//去掉所有的html标记
			function delHtmlTag(str) {
				return str.replace(/<[^>]+>/g, "");
			}
		</script>
	</body>

</html>